<template>
    <div class="all-sys">
        <div class="banner">
            <!--<img src="https://dummyimage.com/60x60" alt="" />-->
            <p>所有商城系统</p>
        </div>

        <div class="main">
            <div class="brand" v-for="(item, index) in data" :key="item.brand">
                <div class="title" @click="toggleExtra(item)">
                    {{ item.brandname }}
                    <svg class="icon" aria-hidden="true" v-if="!item.showList">
                        <use xlink:href="#icon-expandmore"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true" v-if="item.showList">
                        <use xlink:href="#icon-expandless"></use>
                    </svg>
                </div>
                <div class="item" v-for="(ele, i) in item.list" :key="i" v-show="item.showList"
                     @click="turnSystem(ele.system_id)">
                    <span>{{ ele.name }}</span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronright"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {commonMixin} from '@/common/mixin';
    import api from '@/request/api';

    export default {
        mixins: [commonMixin],
        name: 'all-sys',
        data() {
            return {
                data: []
            };
        },
        props: {},
        computed: {},
        created() {
            this._getSysList();
        },
        mounted() {
        },
        methods: {
            //品牌列表,用于对应品牌名称
            _getSysList() {
                return this.request
                    .get(api.message, {})
                    .then((res) => {
                        this.data = res;
                    })
                    .catch((err) => {
                        console.log(err);
                        // this.$toast.fail(err);
                    });
            },
            toggleExtra(item) {
                this.$set(item, 'showList', !item.showList);
            },
            //跳普通系统
            turnSystem(system) {
                let brand = toString(system).substr(0, 1);
                this.$router.replace({
                    name: 'welcome',
                    query: {
                        system: system,
                        brand: brand,
                        isTurn: true
                    }
                });
            },
        },
        watch: {},
        components: {}
    };
</script>

<style lang="stylus" scoped>
    @import '~assets/main.styl'

    * {
        box-sizing border-box
    }

    .all-sys {
        position: relative
        width: 100vw
        .banner {
            position relative
            height vh(140)
            padding 0 bigMargin
            background main-liner
            flex-x(flex-start)
            img {
                width vw(50)
                height vw(50)
                margin-right smallMargin
            }
            p {
                word-vw(word16, grayF)
                line-height vh(21)
            }
        }
        .main {
            width 100vw
            .brand {
                margin-bottom vh(1)
                background-color grayF
                .title {
                    padding 0 cellPadding
                    height vh(49)
                    word-vw(word14, #000)
                    line-height vh(19)
                    flex-x()

                    .icon {
                        width vw(8)
                        height vh(12)
                        fill main-color
                    }
                }
                .item {
                    padding 0 cellPadding
                    height vh(44)
                    margin-bottom vh(1)
                    flex-x()
                    background-color gray8
                    span {
                        word-vw(word14, gray3)
                        line-height vh(19)
                    }
                    .icon {
                        width vw(8)
                        height vw(12)
                        fill gray9
                    }
                }
            }

        }
    }
</style>
